<template>
  <view class="vote-info">
    <view class="title">{{ voteInfo?.title }}</view>
    <p>投票时间: {{ voteInfo?.startTime }} — {{ voteInfo?.endTime }}</p>
    <p class="status">投票状态: {{ voteInfo?.status }}</p>
  </view>
  <view class="vote-section">
    <view style="font-size: 32rpx; padding: 20rpx">
      {{ userStatus ? '您已投票' : '请在下方选项中投票' }}
    </view>
    <transition name="fade">
      <view v-if="!userStatus" class="vote-items">
        <view
          v-for="item in checkList"
          :key="item.id"
          class="vote-item"
          @click="addVote(item)"
        >
          <label>{{ item.text }}</label>
        </view>
      </view>
    </transition>
    <view v-if="userStatus" class="vote-ans">
      <view v-for="item in checkList" :key="item.id" class="vote-ans-item">
        <p>{{ item.text }}</p>
        <up-line-progress
          :percentage="item.count"
          :showText="false"
          class="vote-ans-progress"
        />
      </view>
    </view>
  </view>
  <view class="vote-desc">
    <up-parse :content="voteInfo?.desc"></up-parse>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { VoteItem } from '@/types/others'
import { voteInfos, voteadd } from '@/api/home'

const voteInfo = ref<VoteItem>()

const userStatus = ref(false)

const checkList = ref([
  { text: '满意', id: 1, count: 10 },
  { text: '一般', id: 2, count: 5 },
  { text: '不满意', id: 3, count: 2 }
])

onLoad(async (options: any) => {
  const res = await voteInfos(options.id)
  voteInfo.value = res?.data
})

const addVote = async (item) => {
  const res = await voteadd({
    vote_id: voteInfo.value?.id,
    vote_desc: item.text
  })
  userStatus.value = true
  uni.showToast({
    title: res.message,
    icon: 'none'
  })
}
</script>

<style scoped lang="scss">
.vote-info {
  width: 100%;
  height: auto;
  padding: 20rpx 40rpx;
  // 设置下边框阴影
  box-shadow: 0 5rpx 5rpx #888;
  margin-bottom: 20rpx;
  p {
    color: #999;
    margin-top: 10rpx;
  }
  .title {
    font-size: 34rpx;
    font-weight: bold;
    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  }
  .status {
    color: greenyellow;
  }
}
.vote-section {
  width: 95%;
  height: auto;
  padding: 30rpx 10rpx;
  // 设置阴影效果
  box-shadow: 0 5rpx 5rpx #888;
  margin: 0 auto;
  border-radius: 10rpx;

  .vote-items {
    display: flex;
    padding: 10rpx 20rpx;
    text-align: center;
  }

  .vote-item {
    background-color: #fca364;
    width: 100rpx;
    height: 100rpx;
    margin: 0 auto;
    margin-top: 10rpx;
    color: #fff;
    display: inline-block;
    font-size: 32rpx;
    border-radius: 50%;
    cursor: pointer;

    label {
      margin: auto;
      line-height: 100rpx;
      text-align: center;
    }
  }

  .vote-ans {
    padding: 20rpx 0;
    .vote-ans-item {
      color: #999;
      margin-top: 30rpx;
    }
  }
}
.vote-desc {
  width: 95%;
  height: auto;
  padding: 30rpx 10rpx;
  margin: 0 auto;
}

// transilation
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
